<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--<link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="css/zTreeStyle.css">
    <!--<link rel="stylesheet" href="./css/base.css">-->
    <title>hloa</title>


  </head>
  <body>
    <noscript>
      <strong>We're sorry but hloa doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    var slider = {
      //判断设备是否支持touch事件
      touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
      slider: document.getElementsByTagName('body'),
      //事件
      events: {
        index: 0, //显示元素的索引
        slider: this.slider, //this为slider对象
        icons: null,
        icon: null,
        handleEvent: function (event) {
          var self = this; //this指events对象
          if (event.type == 'touchstart') {
            self.start(event);
          } else if (event.type == 'touchmove') {
            self.move(event);
          } else if (event.type == 'touchend') {
            self.end(event);
          }
        },
        //滑动开始
        start: function (event) {
          if (event.cancelable) {
            // 判断默认行为是否已经被禁用
            if (!event.defaultPrevented) {
              event.preventDefault();
            }
          }
          var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
          startPos = { x: touch.pageX, y: touch.pageY, time: +new Date }; //取第一个touch的坐标值
          isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
          var _silder = document.getElementsByTagName('body')[0];
          _silder.addEventListener('touchmove', this, false);
          _silder.addEventListener('touchend', this, false);
          //this.slider.addEventListener('touchmove', this, false);
          //this.slider.addEventListener('touchend', this, false);
        },
        //移动
        move: function (event) {
          //当屏幕有多个touch或者页面被缩放过，就不执行move操作
          if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
          var touch = event.targetTouches[0];
          endPos = { x: touch.pageX - startPos.x, y: touch.pageY - startPos.y };
          isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
          if (isScrolling === 0) {
            if (event.cancelable) {
              // 判断默认行为是否已经被禁用
              if (!event.defaultPrevented) {
                event.preventDefault();
              }
            }
              //阻止触摸事件的默认行为，即阻止滚屏
            //this.slider.className = 'cnt';
            //this.slider.style.left = -this.index * 600 + endPos.x + 'px';
            //alert('yes');
          }
        },
        //滑动释放
        end: function (event) {
          var duration = +new Date - startPos.time; //滑动的持续时间
          if (isScrolling === 0) { //当为水平滚动时
            if (Number(duration) > 10) {
              //判断是左移还是右移，当偏移量大于10时执行
              try {
                if (endPos.x > 10) {//向右移动
                  preMonth();

                } else if (endPos.x < -10) {//向左移动
                  nextMonth();
                }
                endPos.x = 0;
              } catch (e) {; }
            }
          } else {
            try {
              if (endPos.y > 10) {//向右移动

                preMonth();
              } else if (endPos.y < -10) {//向左移动
                nextMonth();
              }
              endPos.y = 0;
            } catch (e) {; }
          }
          //解绑事件
          var _silder = document.getElementsByTagName('body')[0];
          _silder.removeEventListener('touchmove', this, false);
          _silder.removeEventListener('touchend', this, false);
          //this.slider.removeEventListener('touchmove', this, false);
          //this.slider.removeEventListener('touchend', this, false);
        }
      },
      //初始化
      init: function () {
        var self = this; //this指slider对象
        if (!!self.touch) self.slider[0].addEventListener('touchstart', self.events, false); //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性
      }
    };
    window.onload=function(){
      slider.init();
    }

  </script>
</html>
